<template>
  <el-main>
    <Navbar></Navbar>
    <el-row>
      <el-col :span="24">
        <el-button @click="downloadTemplate" plain>下载模板</el-button>
        <el-upload
            style="display: inline-block; margin-left: 10px;"
            action=""
            :show-file-list="false"
            :auto-upload="false"
            :on-change="uploadChange">
          <el-button type="primary">点击上传</el-button>
        </el-upload>
      </el-col>
    </el-row>
    <el-calendar v-model="currentDate">
      <template
          slot="dateCell"
          slot-scope="{date, data}">
        <el-row>
          <el-col :span="12">
            {{ data.day.split('-').slice(1).join('-') }}
          </el-col>
          <el-col :span="24">
            <el-row v-if="isDateHasOrderSetting(data, date)">
              <el-col :span="12">
                <el-tag type="success" size="mini">
                  {{ data.orderSetting.number }}
                </el-tag>
              </el-col>
              <el-col :span="12">
                <el-tag type="" size="mini">
                  {{ data.orderSetting.reservations }}
                </el-tag>
              </el-col>
            </el-row>
            <el-row v-else >
              <el-col :span="12">
                <el-tag :type="data.tagType" size="mini">
                  {{ data.tagMsg }}
                </el-tag>
              </el-col>
              <el-col :span="12">
                <el-tag :type="data.tagType" size="mini">
                  {{ data.tagMsg }}
                </el-tag>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12"></el-col>
          <el-col :span="12">
            <el-button v-if="!data.hideBtn" size="mini" @click="setOrderSetting(data)" plain>设置</el-button>
          </el-col>
        </el-row>
      </template>
    </el-calendar>
  </el-main>
</template>

<script>
import { getOrderSettingsByYearMonth, uploadOrderSettings, editOrderSettingByDate } from "@/api"

export default {
  watch: {
    // 监测日历的日期变化
    currentDate: {
      handler(newVal, objVal) {
        if (newVal.getMonth() !== objVal.getMonth()) {
          this.findByMonth()
        }
        this.currentDate = newVal
      },
    }
  },
  data() {
    return {
      // 日历的当前日期
      currentDate: new Date(),
      // 预约设置详情
      orderSettings: [],
    }
  },
  methods: {
    // 上传文件后的操作
    uploadChange(file, fileList) {
      console.log(file.raw)
      if (file.raw.type === 'application/vnd.ms-excel'
          || file.raw.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
        // 封装数据
        let formData = new FormData()
        formData.append('file', file.raw)
        // 发送请求
        uploadOrderSettings(formData).then((res) => {
          if (res.data.flag) {
            this.$message.success(res.data.message)
            this.findByMonth()
          } else {
            this.$message.error(res.data.message)
          }
        })
      } else {
        this.$message.error('上传文件只能是xls或者xlsx格式!')
      }

      return false
    },
    // 下载预约设置模板
    downloadTemplate() {
      let a = document.createElement("a"); //创建一个<a></a>标签
      a.href = "/template/orderSettingTemplate.xlsx"; // 给a标签的href属性值加上地址，注意，这里是绝对路径，不用加 点.
      a.download = "预约设置模板.xlsx"; //设置下载文件文件名，这里加上.xlsx指定文件类型，pdf文件就指定.fpd即可
      a.style.display = "none"; // 障眼法藏起来a标签
      document.body.appendChild(a); // 将a标签追加到文档对象中
      a.click(); // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
      a.remove(); // 一次性的，用完就删除a标签
    },
    // 设置某天的预约设置
    setOrderSetting(data) {
      this.$prompt('请输入可预约人数', '预约设置', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^[0-9]*$/,
        inputErrorMessage: '格式不正确'
      }).then(({ value }) => {
        // 发送请求
        editOrderSettingByDate({
          number: value,
          orderDate: data.day,
        }).then((res) => {
          if (res.data.flag) {
            this.$message.success(res.data.message)
            this.findByMonth()
          } else {
            this.$message.error(res.data.message)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      })
    },
    // 根据日期查询是否存在该日期的预约信息
    isDateHasOrderSetting(data, date) {
      for (let index in this.orderSettings) {
        let orderSetting = this.orderSettings[index]
        if (orderSetting.orderDate === data.day) {
          data.orderSetting = orderSetting
          return true
        }
      }

      if (date.getMonth() === this.currentDate.getMonth() && date.getFullYear() === this.currentDate.getFullYear()) {
        data.tagType = 'danger'
        data.tagMsg = '未设置'
      } else {
        data.tagType = 'warning'
        data.tagMsg = '未知'
        data.hideBtn = true
      }
      return false
    },
    // 根据年月份查找预约设置
    findByMonth() {
      getOrderSettingsByYearMonth({
        year: this.currentDate.getFullYear(),
        month: this.currentDate.getMonth() + 1,
      }).then((res) => {
        if (res.data.flag) {
          this.orderSettings = res.data.data
        } else {
          this.$message.error(res.data.message)
        }
      })
    }
  },
  created() {
    this.findByMonth()
  }
}
</script>

<style lang="less">
.is-selected {
  color: #1989FA;
}

.el-calendar-table .el-calendar-day {
  font-size: 1em;
}

.el-col {
  border: 1px solid transparent
}
</style>